<template>
  <app-page card full>
    <template #header>{{ $route.query.id ? '编辑待机画面' : '新增待机画面' }}</template>

    <el-form
      ref="pageForm"
      label-width="85px"
      :model="pageData.detail"
      @submit.prevent="pageActions.handleSubmit()"
    >
      <jax-form-group :style="'max-width:460px'" v-model="pageData.detail" :json="formJson">
        <template #upload-resource>
          <el-form-item
            label="上传资源"
            prop="url"
            required
            :rules="{ required: true, message: '上传资源不能为空', trigger: ['change', 'blur'] }"
          >
            <Uploads
              v-model="pageData.detail.url"
              :list-type="pageData.detail.type === 'image' ? 'picture-card' : 'text'"
              :accept="pageData.detail.type === 'image' ? 'image/*' : '.mp4'"
            />
          </el-form-item>
        </template>
      </jax-form-group>
    </el-form>

    <template #footer>
      <div class="app-toolbar">
        <el-button type="default" @click="pageActions.handleCancel()">返回</el-button>
        <el-button type="primary" @click="pageActions.handleSubmit()">保存</el-button>
      </div>
    </template>
  </app-page>
</template>

<script setup>
import { usePageEdit } from 'jax-node'
import Uploads from '@/components/form/Uploads.vue'

const { pageData, pageActions, pageForm } = usePageEdit()

const formJson = computed(() => {
  const required = true
  const widthFull = 'width: 100%;'

  return [
    {
      name: 'rank',
      label: '序号',
      type: 'inputNumber',
      placeholder: '请输入',
      inputAttr: { style: widthFull },
    },
    { name: 'title', label: '资源标题', required, placeholder: '请输入' },
    {
      name: 'type',
      label: '资源类型',
      required,
      type: 'select',
      options: [
        { label: '图片', value: 'image' },
        { label: '视频', value: 'video' },
      ],
    },
    { name: 'upload-resource', label: '资源' },
    // {
    //   name: 'url',
    //   label: '资源',
    //   type: pageData.detail.type === 'image' ? 'upload-image' : 'upload-video',
    //   required,
    //   inputAttr: { style: widthFull },
    // },
    {
      name: 'duration',
      label: '展示时长',
      type: 'inputNumber',
      placeholder: '请输入',
      required: pageData.detail.type === 'image',
      inputAttr: { style: widthFull, min: 0 },
    },
    { name: 'isOpen', label: '状态', type: 'switch', required },
  ]
})
</script>
